	<style type="text/css">
		*{margin: 0; padding: 0;}
		ul,ol{list-style: none;}
		a{text-decoration: none;}
		a,img{border: 0;}
		
		/* 头部 */
		div.t1{
		    background-color: #eee;
		}
		div.top{
		    margin: 0 auto;
		    width: 80%;
		    overflow: hidden;
		    zoom: 1;
		    height: 26px;
		    font-size: 12px;
		}
		div.top1{
		    float: left;
		    display: flex;
		    height: 16px;
		    margin-top: 5px;
		}
		div.top1 ul{
		    /* font-size: 16px; */
		    display: flex;
		    margin-right: 20px;
		    border-right: 2px solid white;
		}
		div.top1 ul.ul1 li{
		    margin-right: 10px;
		    cursor: pointer;
		}
		div.top1 ul.ul1 li:nth-child(2){
		    color: red;
		}
		div.top2 ul.ul2{
		    display: flex;
		}
		div.top2 ul.ul2 li{
		    font-size: 12px;
		    margin-right: 10px;
		    cursor: pointer;
		    border-right: 2px solid white;
		    padding-right: 10px;
		}
		
		div.top2{
		    float: right;
		    height: 16px;
		    margin-top: 5px;
		}
		div.box1,div.box2{
		    cursor: pointer;
		}
		/* 搜索 */
		div.t2{
		    height: 120px;
		}
		div.t2 div.box{
		    width: 80%;
		    margin: 0 auto;
		    display: flex;
		    justify-content: space-between;
		}
		div.t2 div.box div.a1{
		    margin-top: 30px;
		    cursor: pointer;
		}
		div.t2 div.box div.a2{
		    display: flex;
		    margin-top: 40px;
		    cursor: pointer;
		}
		.display{
		    display: block;
		    border: solid 2px red;
		    line-height: 30px;
		    text-align: center;
		    width: 80px;
		    height: 30px;
		}
		.listtop{
		    border: solid 2px red;
		    border-top:none;
		    line-height: 30px;
		    text-indent: 4px;
		    background: #fafafa;
		    display: none;
		}
		.listtop li{
		    text-align: center;
		}
		div.t2 div.box div.a2 div.aa ul.list li:hover{
		    background: #eee;
		    color: #fff;
		}
		div.t2 div.box div.a2 form input:nth-child(1){
		    border: solid 2px red;
		    border-left: 0;
		    width: 200px;
		    height: 30px;
		    color:brown;
		    padding: 0 5px;
		    line-height: 30px;
		}
		div.t2 div.box div.a2 form input:nth-child(2){
		    border: solid 2px red;
		    border-left: 0;
		    width: 80px;
		    height: 30px;
		    background-color: red;
		    cursor: pointer;
		}
		div.t2 div.box div.a3{
		    border: 2px solid #eee;
		    height: 40px;
		    width: 150px;
		    line-height: 40px;
		    text-align: center;
		    margin-top: 30px;
		    color: red;
		    font-size: 14px;
		    cursor: pointer;
		    /* overflow: hidden; */
		}
		
		ul.ul3{
		    /* display: none; */
		    position: absolute;
		    left: 75%;
		    top: 26px;
		    z-index: 999;
		    overflow: hidden;
		    zoom: 1;
		    background-color: white;
		    border: 1px solid #eee;
		    width: 150px;
		    height: 50px;
		    display: none;
		}
		ul.ul3 li:nth-child(1){
		    float: left;
		    margin-left: 10px;
		    font-size: 10px;
		    line-height: 50px;
		    cursor: pointer;
		    display: none;
		}
		ul.ul3 li:nth-child(2){
		    float: right;
		    margin-right: 10px;
		    font-size: 10px;
		    line-height: 50px;
		    cursor: pointer;
		    display: none;
		}
		
		ul.ul3 li:hover{
		    color: red;
		}
		ul.ul2 li.li3:hover ul.ul3{
		    display: block;
		}
		ul.ul2 li.li3:hover ul.ul3 li{
		    display: block;
		}
		/* 导航 */
		div.nav{
		    border-bottom: 1px solid red;
		    height: 40px;
		}
		div.nav1{
		    width: 80%;
		    margin: 0 auto;
		    height: 40px;display: flex;
		}
		div.nav1 ul.ul4{
		    display: flex;
		}
		div.nav1 ul.ul4 li:nth-child(1){
		    color: red;
		}
		div.nav1 ul.ul4 li:hover{
		    color: red;
		}
		div.nav1 ul.ul4 li{
		    cursor: pointer;
		    margin-right: 10px;
		    height: 40px;
		    width: 100px;
		    text-align: center;
		    line-height: 40px;
		}
		div.nav1 div.nav2{
		    width: 200px;
		    background-color: red;
		    text-align: center;
		    line-height: 40px;
		    color: white;
		    cursor: pointer;
		    overflow: hidden;
		}
	</style>


<div class="t1">
		    <div class="top">
		        <div class="top1">
		            <ul class="ul1">
		                <li><a href="http://localhost:3000/land.html" style="color: red;">登录</a></li>
		                <li><a href="http://localhost:3000/register_1.html">注册</a></li>
		            </ul>
		            <div class="box1">送货至：</div>
		            <div class="box2">上海市；宝山区；吴淞街道</div>
		        </div>
		        <div class="top2">
		            <ul class="ul2">
		                <li>我的订单</li>
		                <li>我的积分</li>
		                <li>我的优惠卷</li>
		                <li>我的收藏</li>
		                <li class="li3">
		                   <span>客服服务</span>
		                   <ul class="ul3">
		                     <li>商家后台</li>
		                     <li>商家帮助</li>
		                   </ul>
		                </li>
		                <li class="iconfont icon-shoujichongzhi">手机搜豹商城</li>
		            </ul>
		        </div>
		    </div>
		</div>
		    <!-- 头部 end -->
		    <!-- 搜索 start -->
		    <div class="t2">
		        <div class="box">
		        <div class="a1"><img src="./img/pc_home_logo_default.png" alt=""></div>
		        <div class="a2">
		            <div class="aa">
		            <span class="display">商品</span>
		            <ul class="listtop">
		                <li>商品</li>
		                <li>店铺</li>
		            </ul>
		            </div>
		            <form action="#">
		                <input class="ipt" type="text" placeholder="搜索关键字" id="sousuo">
		                <input type="button" value="搜索" id="sou">
		            </form>
		        </div>
		        <div class="a3 iconfont icon-wodelicai tocart">
					<a href="http://localhost:3000/cart.html" style="color: red;">我的购物车</a>
		        </div>
		    </div>
		    </div>
		    <!-- 搜索 end -->
		    <!-- 导航 start-->
		    <div class="nav">
		       <div class="nav1">
		          <div class="nav2 iconfont icon-kuaidi">
		             全部商品分类
		          </div>
		          <ul class="ul4">
		              <li><a href="http://localhost:3000" style="color: black;">首页</a></li>
		              <li>团购商品</li>
		              <li>促销活动</li>
		              <li>店铺街</li>
		              <li>积分商铺</li>
		              <li>限时抢购</li>
		          </ul>
		       </div>
		    </div>
		
